window.addEventListener('load', function() {
    // 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 获取focus的宽度
    var w = focus.offsetWidth;
    // 定时器
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translateX = -index * w; //索引号乘以宽度
        ul.style.transition = 'all 0.3s'; // 图片过渡效果
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
    // 监听过渡完成的事件
    ul.addEventListener('transitionend', function() {
        if (index >= 3) {
            index = 0;
            ul.style.transition = 'none'; //清除过渡效果，迅速回来
            var translateX = -index * w; //利用最新的索引乘以宽度 去滚动图片
            ul.style.transform = 'translateX(' + translateX + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translateX = -index * w;
            ul.style.transform = 'translateX(' + translateX + 'px)';
        };
        // 圆点跟随变化
        ol.querySelector('.active').classList.remove('active');
        ol.children[index].classList.add('active');
    });
    /*
    // 手指滑动
    // 1.触摸元素 touchstart   获取手指初始坐标
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    // 2.移动手指  touchmove  计算手指的滑动距离
    ul.addEventListener('touchmove', function(e) {
        // 计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // 移动盒子   盒子原来的位置+手指移动的距离
        var translateX = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';
        flag = true;
        e.preventDefault(); //阻止滚动屏幕的行为
    });
    // 手指离开  判断播放上一张还是下一张
    ul.addEventListener('touchend', function(e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                // 如果右滑就是 播放上一张 moveX是正值
                if (moveX > 0) {
                    index--;
                } else { // 如果左滑就是 播放下一张 moveX是负值
                    index++;
                }
                var translateX = -index * w;
                ul.style.transition = 'all 0.3s';
                ul.style.transform = 'translateX(' + translateX + 'px)';
            } else {
                // 移动距离小于50 就回弹
                var translateX = -index * w;
                ul.style.transform = 'translateX(' + translateX + 'px)';
            }
        }
        // 手指离开开启定时器
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            var translateX = -index * w;
            ul.style.transition = 'all 0.3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
    });*/
});